<script setup lang="ts">
import { ref } from 'vue'
import {VideoCamera, Picture, UploadFilled} from "@element-plus/icons-vue";
import { ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElUpload, ElRadioGroup, ElRadio } from 'element-plus'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const userId=userStore.id

// 控制对话框显示
const showDialog = ref(false)

// 表单数据
const videoForm = ref({
  title: '',
  drb: '',
  face: '',
  userId: userId,
  url: '',

})

// 背景图选项
const backgroundOptions = [
  { label: '默认背景', value: 'default' },
  { label: '自定义背景', value: 'custom' }
]

// 打开对话框
const openDialog = () => {
  showDialog.value = true
}

// 提交表单
const submitForm = async () => {
  if (!videoForm.value.title.trim()) {
    ElMessage.warning('请输入视频标题')
    return
  }

  if (!videoForm.value.url) {
    ElMessage.warning('请上传视频文件')
    return
  }




  const {data} = await axios.post("/api/video", videoForm.value);
  if(data>0){
    ElMessage.success('视频发布成功');
    showDialog.value = false
  }
  else{
    ElMessage.error('视频发布失败');
  }
  resetForm()
}

// 重置表单
const resetForm = () => {
  videoForm.value = {
    title: '',
    drb: '',
    face: '',
    userId: '',
    url: ''
  }
}
const isGenerating = ref(false);
const handleImageUploadSuccess = (response, uploadFile, uploadFiles) => {
  const allUrls = uploadFiles
      .map(file => file.response)
      .filter(Boolean);
  videoForm.value.face = allUrls.join(',');
};
const handleVideoUploadSuccess = (response, uploadFile, uploadFiles) => {

  const allUrls = uploadFiles
      .map(file => file.response)
      .filter(Boolean);
  videoForm.value.url = allUrls.join(','); // 将视频URL存储在video字段中
};
// 处理视频文件上传

</script>

<template>
  <div class="publish">
    <!-- 发布视频按钮 -->
    <el-button
        type="primary"
        class="publish-btn"
        @click="openDialog"
    >
      <el-icon><VideoCamera /></el-icon>
      <span>发布视频</span>
    </el-button>
  </div>

  <!-- 发布视频对话框 -->
  <el-dialog
      v-model="showDialog"
      title="发布视频"
      width="500px"
  >
    <el-form :model="videoForm" label-width="80px">
      <el-form-item label="视频标题" required>
        <el-input
            v-model="videoForm.title"
            placeholder="请输入视频标题"
        />
      </el-form-item>

      <el-form-item label="视频描述">
        <el-input
            v-model="videoForm.drb"
            type="textarea"
            :rows="3"
            placeholder="请输入视频描述"
        />
      </el-form-item>



      <el-form-item
          label="自定义背景"
      >
        <el-upload drag style="width:100%"
                   action="/api/file/myboke"
                   :on-success="handleImageUploadSuccess"
                   :disabled="isGenerating"
        >
          <el-icon class="el-icon--upload"><UploadFilled/></el-icon>
          <div class="el-upload__text">将图片拖拽到此处，或 <em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">支持 jpg/png 格式， 大小不超过 5M</div>
          </template>
        </el-upload>
      </el-form-item>

      <el-form-item label="视频文件" required>
        <el-upload drag style="width:100%"
                   action="/api/file/myboke"
                   :on-success="handleVideoUploadSuccess"
                   :disabled="isGenerating"
        >
          <el-icon class="el-icon--upload"><UploadFilled/></el-icon>
          <div class="el-upload__text">将图片拖拽到此处，或 <em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">支持 jpg/png 格式， 大小不超过 5M</div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="submitForm">发布</el-button>
    </template>
  </el-dialog>

  <router-view />
</template>

<style scoped>
.publish {
  position: fixed;
  right: 20px;
  top: 60px;
  z-index: 1000;
}

.publish-btn {
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  color: white;
  padding: 10px 16px;
  border-radius: 20px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.publish-btn:hover {
  background-color: #ff7875;
  border-color: #ff7875;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.2);
}

.publish-btn:active {
  transform: translateY(0);
}

.publish-btn .el-icon {
  margin-right: 6px;
}

.upload-tip {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

.file-name {
  color: #409eff;
  margin-top: 4px;
}

/* 单选按钮组样式 */
:deep(.el-radio-group) {
  display: flex;
  gap: 20px;
}

:deep(.el-radio__label) {
  font-size: 14px;
}
</style>